<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>传智教育元气派</title>
    <style> body {
        user-select: none;
        text-align: center;
    }

    table {
        margin: 0 auto
    }

    td div {
        width: 150px;
        height: 150px;
        border: 1px solid darkgrey;
        display: flex;
        align-items: center;
        justify-content: center;
        color: black;
    }

    #s {
        background-color: red;
        color: white;
    }

    td div:active {
        background: deepskyblue;
        color: white;
    }

    button {
        margin: 0.5rem;
        width: 9rem;
        height: 3rem;
        font-size: 1.2rem;
        border-radius: 1rem;
    }

    button:hover {
        border-radius: 1rem;
        background-color: deepskyblue;
        color: aliceblue;
    }</style>
</head>
<body><h1>小贱钟控制</h1>

<button id="a">安装角度</button>
<br>
<button id="d">画圆</button>
<br><br>端口:<input id="k" value="0">角度:<input id="l" value="0">
<button id="b">测试舵机端口</button>
<br><br>坐标X:<input id="m" value="0">坐标Y:<input id="n" value="0">
<button id="c">反解</button>
<br><br>
<br><br>关节角列表:<input id="j" value="[]">
<button id="r2">运行</button>
<br><br>路径点列表:<input id="g" value="[]">
<button id="r1">运行</button>
<br>
<script> function u(p) {
    return `${p}`;
}

function g(i) {
    return document.getElementById(i);
}

function fe(e, f) {
    e.addEventListener('click', function (e) {/* do something*/
        f();
    });
}

function fg(u, f) {
    let x = new XMLHttpRequest();
    x.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            f(x);
        }
    };
    x.open("GET", u, true);
    x.send();
}

function fgp(u, f, d) {
    let x = new XMLHttpRequest();
    x.open("POST", u, true);
    x.setRequestHeader("content-Type","application/json; charset=utf-8");
    x.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            f(x);
        }
    };
    x.send(typeof(d)=='string' ? d : JSON.stringify(d));
}

fe(g('a'), () => {
    fg(u('/plot/init'), () => {
    });
});
fe(g('b'), () => {
    let p = g('k').value;
    let a = g('l').value;
    fg(u(`/plot/test?p=${p}&a=${a}`), () => {
    });
});
fe(g('c'), () => {
    let p = g('m').value;
    let a = g('n').value;
    fg(u(`/plot/inverse?x=${p}&y=${a}`), (x) => {
        console.log(x);
    });
});
fe(g('r1'), () => {
    fgp(u(`/plot/path`), (x) => {
        console.log(x);
    }, g('g').value);
});
fe(g('r2'), () => {
    fgp(u(`/plot/joints`), (x) => {
        console.log(x);
    }, g('j').value);
});
fe(g('d'), () => {
    fg(u('/plot/circle'), () => {
    });
});</script>
</body>
</html>